<template>
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
    <el-form-item label="运单编号" prop="billNo">
      <el-input v-model="queryParams.billNo" placeholder="请输入运单编号" clearable size="small"
        @keyup.enter.native="handleSearch" />
    </el-form-item>
    <el-form-item label="发货方" prop="senderName">
      <el-input v-model="queryParams.senderName" placeholder="请输入发货方名称" clearable size="small"
        @keyup.enter.native="handleSearch" />
    </el-form-item>
    <el-form-item label="收货方" prop="receiverName">
      <el-input v-model="queryParams.receiverName" placeholder="请输入收货方名称" clearable size="small"
        @keyup.enter.native="handleSearch" />
    </el-form-item>
    <el-form-item label="运单状态" prop="billStatus">
      <el-select v-model="queryParams.billStatus" placeholder="请选择运单状态" clearable size="small">
        <el-option v-for="dict in dict.type.bill_status" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime">
      <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'ShipmentSearchForm',
  dicts: ['bill_status'],
  props: {
    queryParams: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 日期范围
      dateRange: []
    }
  },
  watch: {
    dateRange (val) {
      if (val) {
        this.queryParams.beginTime = val[0]
        this.queryParams.endTime = val[1]
      } else {
        this.queryParams.beginTime = undefined
        this.queryParams.endTime = undefined
      }
    }
  },
  methods: {
    /** 搜索按钮操作 */
    handleSearch () {
      this.$emit('search')
    },
    /** 重置按钮操作 */
    handleReset () {
      this.dateRange = []
      this.$refs.queryForm.resetFields()
      this.$emit('reset')
    }
  }
}
</script>